<template>
   <div ref="content">
       <v-md-editor
         class="md"
         mode="preview"
         v-model="ArticleDetail.content"
         :include-level="[1,2,3,4]"
         ref="preview"></v-md-editor>
   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     data() {
      return {
         titles:[]
      }
     },
     computed:{
      ...mapState('ArticleDetail',['ArticleDetail'])
     },
     mounted() {
          this.init()
     },
     methods:{
          ...mapMutations('Tool',['SETNAVIGATION']),
          ...mapMutations('ArticleDetail',['SETARTICLEDETAILCATALOG']),
          init(){
             const anchors = this.$refs.preview.$el.querySelectorAll('h2,h3');
             const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());
            if (!titles.length)  return
            let top = this.$refs.content.offsetTop
   
            const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();

             let newtitles = titles.map((el) => ({
                label: el.innerText,
                top: el.offsetTop + top ,
                indent: hTags.indexOf(el.tagName),
            }));
         
            this.SETARTICLEDETAILCATALOG(newtitles)

          },
     }
  }
</script>
<style scoped lang='less'>

::v-deep .vuepress-markdown-body,.md{
    background: none !important;
    font-size: 16px;
 }
 


.md{
   width: 100%;
}


</style>